<template>
    <section>
        <div class="app-container calendar-list-container">
            <div class="no-print">
                <el-button class="filter-item" type="primary" @click="cancel">返回</el-button>
                <el-button class="filter-item" type="primary" v-print="'#printBox'">打印</el-button>
                <el-button class="filter-item" type="primary" v-print="'#allPrintBox'">汇总打印</el-button>
            </div>
            <div class="w-body info_form" id="printBox">
                <el-form :model="entity" ref="entity" label-width="100px" size="small">
                    <div id="allPrintBox">
                        <el-row class="r-form-row">
                            <el-col :span="24">
                                <div class="view-title">加工单</div>
                            </el-col>
                        </el-row>
                        <el-row class="r-form-row">
                            <el-col :span="18">
                                <el-form-item label="加工单号:" prop="businessCode">
                                    {{entity.businessCode}}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="r-form-row">
                            <el-col :span="8" class="r-form-cell">
                                <el-form-item label="订单号:" prop="orderNo">
                                    <span>{{entity.orderNo}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="r-form-cell">
                                <el-form-item label="外部单号:" prop="outBusinessCode">
                                    <span>{{entity.outBusinessCode}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户名称:" prop="customerName">
                                    <span>{{entity.customerName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="r-form-row">
                            <el-col :span="8" class="r-form-cell">
                                <el-form-item label="产品:">
                                    <span>{{entity.goodsName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="r-form-cell">
                                <el-form-item label="色号:">
                                    <span>{{entity.modelName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="门幅:">
                                    <span>{{entity.modelProp}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="r-form-row">
                            <el-col :span="8" class="r-form-cell">
                                <el-form-item label="卷数:" prop="total">
                                    <span>{{entity.total}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="r-form-cell">
                                <el-form-item label="数量:" prop="quantity">
                                    <span>{{entity.quantity}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="单价:" prop="price">
                                    <span>{{entity.price}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row class="r-form-row">
                            <el-col :span="8" class="r-form-cell">
                                <el-form-item label="仓库:" prop="warehouseName">
                                    <span>{{entity.warehouseName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8" class="r-form-cell">
                                <el-form-item label="创建人:" prop="createUserName">
                                    <span>{{entity.createUserName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="发货时间:" prop="sendTime">
                                    <span>{{entity.sendTime}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <el-row>
                        <el-col :span="24">
                            <div class="w-table">
                                <grid gridTitle="物品信息" :columns="columns" :enableEdit="false" :loading="false"
                                    ref="mainGrid" :pagination="false" :permissions="permissions" :multi="false"
                                    cellClassName="table-view-row" headerCellClassName="table-view-row">
                                </grid>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </section>
</template>

<script>
    import request from '@/router/axios'
    import { Message, MessageBox } from 'element-ui'
    import url from '@/const/apiURL'
    import GridDialog from '@/components/GridDialog'
    import grid from '@/components/Grid'
    import { mapGetters } from 'vuex'

    export default {
        components: { GridDialog, grid },
        data() {
            return {
                warehouseList: [],
                entity: {
                    businessType: '',
                    customerCode: '',
                    customerName: '',
                    warehouseCode: '',
                    goods: []
                },
                goodsQueryEntity: {},
                columns: [
                    { label: this.global.modelName, width: 60, prop: 'goodsName', align: 'center' },
                    { label: this.global.modelProp, width: 60, prop: 'modelProp', align: 'center' },
                    { label: '物料名称', width: 300, prop: 'materialName', align: 'center' },
                    { label: '克重', width: 100, prop: 'weight', align: 'center' },
                    // { label: '物料类型', width: 80, prop: 'materialTypeName', align: 'center' },
                    { label: '单位', width: 80, prop: 'unit', align: 'center' },
                    { label: '序列号', width: 120, prop: 'serialNumber', align: 'center' },
                    // { label: '批次号', width: 140, prop: 'batchNo', align: 'center' },
                    { label: '数量', width: 80, prop: 'quantity', align: 'center' },
                    { label: '卷数', width: 60, prop: 'total', align: 'center' },
                    { label: '备注', width: 90, prop: 'remark', align: 'center' }
                ]
            }
        },
        created() {
            this.businessCode = this.$route.query.businessCode
            this.code = this.$route.query.code
            this.index = this.$route.query.index
            this.goodsCode = this.$route.query.goodsCode
            this.init()
        },
        computed: {
            ...mapGetters(['permissions'])
        },
        methods: {
            init() {
                this.initWarehouse()
                this.initData()
            },
            cancel() {
                if (this.index) {
                    this.$router.push({ path: '/prod/business/hand', query: {} })
                } else {
                    if (this.entity.goodsCode == 'All') {
                        this.$router.push({ path: '/prod/business/all', query: { code: this.code, goodsCode: this.entity.goodsCode, orderNo: this.entity.orderNo } })
                    } else {
                        this.$router.push({ path: '/prod/business', query: { code: this.code, goodsCode: this.entity.goodsCode, orderNo: this.entity.orderNo } })
                    }
                }
            },
            initWarehouse() {
                this.warehouseUrl().then(data => {
                    if (data) {
                        this.warehouseList = data
                    }
                })
            },
            initData() {
                this.viewUrl(this.businessCode).then(data => {
                    if (data) {
                        this.entity = data
                        data.goods.forEach(row => {
                            row.code = row.linkCode
                            this.$refs['mainGrid'].addRow(row)
                        })
                    }
                })
            },
            viewUrl(businessCode) {
                return request({
                    url: url.BUSINESS_VIEW_URL,
                    method: 'post',
                    data: { key: 'key' },
                    params: { businessCode }
                })
            },
            warehouseUrl() {
                return request({
                    url: url.WAREHOUSE_USABLE_URL,
                    method: 'post',
                    data: { key: 'key' }
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .w-body {
        padding-top: 8px;
        width: 1024px;
    }

    .w-table {
        border: 1px solid #ebeef5;
    }

    .w-table-title {
        border: 1px solid #ebeef5;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        line-height: 23px;
        display: inline-block;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative;
        vertical-align: middle;
        width: 100%;
        font-size: 14px;
        color: gray;
    }

    .view-title {
        width: 100%;
        height: 60px;
        font-size: 24px;
        text-align: center;
        font-weight: bold;
    }

    .grid-rq {
        border: 1px solid black !important;
    }
</style>